<template>
  <div style="line-height: 50px; display: flex">
    <div style="display: flex;align-items: center;justify-content: center;">
      <img alt="" src="@/assets/hgnu.png" style="width: 35px;">
    </div>
    <div
      style="
        width: 200px;
        margin-left: 10px;
        font-weight: bold;
        color: dodgerblue;
      "
    >
      黄冈师范学院寝室管理系统
    </div>
    <Clock
      style="font-size: 20px; position: absolute; left: 50%; overflow: hidden"
    />
    <div style="flex: 1"></div>
    <div class="right-info">
      <i class="el-icon-user-solid" @click="SignOut">
        退出登录 
      </i>
    </div>
  </div>
</template>

<script>
import { removeToken,removePermission } from "@/utils/auth";
import { logout } from "@/api/base";
import Clock from "@/components/ClockView";
export default {
  name: "HeaderView",
  components: {
    Clock,
  },
  data() {
    return {
      name: "",
    };
  },
  created() {},
  methods: {
    SignOut() {
        logout().then(() => {
          removeToken();
          removePermission();
        });
        this.$router.replace({ path: "/" });
    },
    /* selfInfoManage() {
      this.$router.push("/selfInfo")
    } */
  },
};
</script>

<style scoped>
.right-info {
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.5%;
}

.right-info:hover {
  cursor: pointer;
}
</style>